<script lang="tsx">
/**
 * 首页
 */
export default {
  name: "index"
}
</script>

<script lang="tsx" setup>
import {computed, onMounted, Ref, ref} from "vue"
import MenuForm from "@/components/menu-form/index.vue"
import HeadForm from "@/components/head-form/index.vue"
import BottomForm from "@/components/bottom-form/index.vue"
import {processRequest} from "anqin-framework"
import {useRoute, useRouter} from "vue-router"

/**
 * 图片地址
 */
const src = "http://111.229.5.45:16000/"

/**
 * 菜单
 */
const router = useRouter()
const route = useRoute()

/**
 * 菜单列表
 */
const menuItems: Ref<any[]> = ref([])

/**
 * 激活的菜单
 */
const activeMenu = ref()

/**
 * 文章列表
 */
const textList: any = ref([])

/**
 * 全局配置数据
 */
const globalData = ref()

/**
 * 滚动
 */
const scrollTop = ref(0)
const isRun = computed(() => scrollTop.value > 60)
const handleScroll = (e: any) => {
  scrollTop.value = e.scrollTop
}

/**
 * 获取全局配置
 */
const getGlobalData = async () => {
  const result = await processRequest.get("/api/BlogSystemConfigs")
  globalData.value = result
}

/**
 * 获取菜单
 */
const getMenuList = async () => {
  const result = await processRequest.get("/api/BlogCategories")
  menuItems.value = result.dataList.map((item: any) => {
    return {
      id: item.id,
      name: item.name,
      src: item.src
    }
  })
}

/**
 * 获取菜单参数
 */
const getMenuQuery = () => {
  if (route.query.id) {
    handleMenuChange(route.query.id)
  } else {
    handleMenuChange(menuItems.value[0].id)
  }
}

/**
 * 监听菜单改变
 */
const handleMenuChange = async (id: any) => {
  activeMenu.value = id
  const result = await processRequest.get("/api/BlogTexts",
      {
        pageIndex: 1,
        pageSize: 999
      })
  textList.value = result.dataList.filter((item: any) => item.categoryId == id)
}

/**
 * 跳转到详情
 */
const handleTextClick = async (item: any) => {
  await router.push({
    name: "detail",
    query: {
      id: item.id
    }
  })
}

/**
 * 挂载
 */
onMounted(async () => {
  await getGlobalData()
  await getMenuList()
  getMenuQuery()
})
</script>

<template>
  <div class="page-wrap">
    <el-scrollbar style="height: 100%" @scroll="handleScroll">
      <div class="page-container">
        <div class="page-header">
          <MenuForm :globalData="globalData" :isRun="isRun" :menuItems="menuItems" @change="handleMenuChange"/>
        </div>
        <div v-if="activeMenu === menuItems?.[0]?.id" class="page-body">
          <HeadForm :globalData="globalData"/>
        </div>
        <div :class="{'page-list-active':activeMenu !== menuItems?.[0]?.id}" class="page-list">
          <div v-for="(item,index) in textList" :key="index" class="item" @click="handleTextClick(item)">
            <div class="item-left">
              <img :src="src + item.image" alt="" class="item-img"/>
            </div>
            <div class="item-right">
              <div class="item-time">
                发布于 {{ item?.creationTime }}
              </div>
              <div class="item-name">
                {{ item.title }}
              </div>
              <div class="item-read">
                阅读量：{{ item.readCount }}
              </div>
              <div class="item-text">
                {{ item.text }}
              </div>
            </div>
          </div>
        </div>
        <div class="page-footer">
          <BottomForm :globalData="globalData"/>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">
</style>
